import { Search } from '@/api/index.js' // 导入home中的api数据源

// 数据源
const state = {
  // 搜索页面数据源
  searchList: '',
  goodsListNum: '', // 计算商品列表的总数量，数据分页用这个来展示总共数据
  //、、、、、、、、、、如果 currentPage == 1  重新渲染paginati组件 目的是当点击导航后应该清空上一次的分页，回归到第一页
  // 控制search页面的组件是否显示 ，如果服务端没有数据响应，则隐藏search页面的组件
  show: true,
  // 当用户在搜索中输入关键字后,浏览器的 $route.params.keyword 则不为空 此时改变
  // clearinfo 的值  然后在 商品分类的 请求中将该参数带给服务端
  // 如果为false清空所有的 商品属性选择 ,让搜索框能够正常搜索
  // Info 商品的属性变量
  clearInfo: true,
  // 将搜索框的关键字和商品一级分类绑定在一起，从而实现搜索关键字也能控制商品二级分类
  Info: { OneID: 0, val: '' },

  goodsDetail: false // 在商品的详情页面 只有手机才有筛选功能，这里存储一个当前是否手机商品
}
// 修改 state 数据源
const mutations = {
  searchList(state, Value) {
    state.searchList = Value
    // Value.DataQuantity 这个是服务端返回的 每一个表有多少条数据 数据分页根据这个渲染商品总共有多少数据
    state.goodsListNum = Value.DataQuantity
    // goodsList.length 代表 服务端中没有这个表
    if (Value.goodsList.length == 0) {
      state.show = false
    } else {
      state.show = true
    }
  },
  // 把搜索框的关键字通过id和商品的一级分类 对应上 从而控制商品二级分类
  Goodsinfo(state, value) {
    // TwoID: '' 搜索关键字需要清空二级分类的属性
    state.Info.OneID = value.id
    state.Info.val = value.val
  },

  // 判断详情页面是否展示商品的筛选功能
  GoodsDetail(state, value) {
    state.goodsDetail = value // 展示
    // 将这个数据保存到浏览器中，防止 vuex 刷新页面数据丢失
    // 永久存储
    window.localStorage.GoodsDetail = JSON.stringify(value)
  }
}

// 异步函数，书写业务
const actions = {
  async searchList(state, params) {
    // params 接收客户端的post传参
    let result = await Search(params)
    if (result.status == 200) {
      state.commit('searchList', result.data)
    } else {
      return Promise.reject(new Error('faile'))
    }
  },
  // 将获取的参数保存到浏览器中，刷新页面调用这个函数
  GoodsDetail(state) {
    let Detail = JSON.parse(window.localStorage.GoodsDetail)
    state.commit('GoodsDetail', Detail)
  }
}

// 计算属性
//该函数节点的形参指向 state节点中的数据源
const getters = {
  // 商品信息数据
  goodsList(state) {
    // 返回 state节点 中的所有数据
    // console.log(state)

    // 返回 仓库中的  searchList 下的goodsList数组 也就是 商品信息
    // console.log(state.searchList.goodsList)
    // 如果没有网络 防止报错 返回 空数组
    return state.searchList.goodsList || []
  },

  // 商品分类数据
  Classification(state) {
    return state.searchList.Classification || []
  }
}

// 向外共享函数
export default {
  state,
  mutations,
  actions,
  getters
}
